<template>
  <BasicTable @register="registerTable" :showIndexColumn="false"> </BasicTable>
</template>
<script lang="ts"
  setup>
  import { BasicTable, useTable } from '@/components/Table'
  import { watch } from 'vue'

  const props = defineProps({
    loading: { type: Boolean },
  })

  const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
    columns: [],
    canResize: false,
    scroll: { y: '100%' },
    pagination: false,
  })

  watch(
    () => props.loading,
    (val) => {
      setLoading(val)
    },
  )

  const setData = (data) => {
    const newData = [{ type: '数值' }, { type: '占比' }]
    const headerList = data.titleList.map((item: any, index: any) => {
      newData[0][item] = data.valueList[index]
      newData[1][item] = data.ratioList[index]
      return {
        title: item,
        dataIndex: item,
        width: 120,
        customRender: ({ text, record: { type } }) => {
          if (typeof text === 'number') {
            if (type === '占比') {
              return (text * 100).toFixed(2) + '%'
            }
            return text
          } else {
            return text || '--'
          }
        },
      }
    })
    headerList.unshift({
      title: '类别',
      dataIndex: 'type',
      width: 60,
      fixed: 'left'
    })
    setColumns(headerList)
    setTableData(newData)

  }
  defineExpose({
    setData,
  })
</script>
